<!-- 固定碳排放页面，实现固定碳排放管理数据列表显示 CRUD -->
<template>

    <div>
        <el-row :gutter="20">
            <el-col :span="12" :offset="0">
                <h1>固定碳排</h1>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12" :offset="0">
                <el-button type="primary" size="medium" @click="sava('添加')">添加</el-button>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="17" :offset="0">
                <el-table :data="carbonInfo" style="width: 100%">
                    <el-table-column prop="name" label="编号" width="120" />
                    <el-table-column prop="name" label="能耗项" width="120" />
                    <el-table-column prop="name" label="项目类型" width="120" />
                    <el-table-column prop="name" label="时间类型" width="150" />
                    <el-table-column prop="name" label="能耗数" width="150" />
                    <el-table-column prop="name" label="预警阈值" width="150" />
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="edit(scope.$index, scope.row, '编辑')">编辑</el-button>
                            <el-button size="mini" type="danger"
                                @click="deleteById(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <!-- 弹框 -->
        <el-dialog :title="title" width="40%" :visible.sync="savaOrUpdateDialog">
            <div>

            </div>
            <span slot="footer">
                <el-button @click="savaOrUpdateDialog = false">Cancel</el-button>
                <el-button type="primary" @click="saveOrUpdate()">OK</el-button>
            </span>
        </el-dialog>


    </div>

</template>

<script>

export default {
    data() {
        return {
            savaOrUpdateDialog:false, // 弹窗控制
            carbonInfo: [{ // 主页面数据
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            saveOrUpdate:{ // 新增 or 修改的参数
                id:0
            },
            title:"", // 弹窗标题控制

        }
    },
    methods: {
        queryList(){

        },
        // 添加or修改
        saveOrUpdate(){
            if(this.saveOrUpdate.id == 0){
                // 添加
            }

            // 修改

        },
        // 修改
        edit(index, row , title) {
            this.title = title

            // 获取修改的数据


            this.savaOrUpdateDialog = true
        },
        // 删除
        deleteById(index, row) {
        },
        sava(title){
            this.title = title
            this.savaOrUpdateDialog = true
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.queryList()
    },
}
</script>

<style></style>